<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#e13e3e',
                        secondary: '#4cd964',
                        dark: '#1a1a1a',
                        light: '#f8f8f8'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #1a1a1a;
            color: #ffffff;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .now-playing {
            animation: rotate 20s linear infinite;
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .breathing {
            animation: breathing 2s ease-in-out infinite;
        }
        @keyframes breathing {
            0% { box-shadow: 0 0 0 0 rgba(225, 62, 62, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(225, 62, 62, 0); }
            100% { box-shadow: 0 0 0 0 rgba(225, 62, 62, 0); }
        }
        .wave-progress {
            height: 4px;
            background: linear-gradient(90deg, #e13e3e, #ff6b6b);
            border-radius: 2px;
            position: relative;
            overflow: hidden;
        }
        .wave-progress::after {
            content: "";
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 20" xmlns="http://www.w3.org/2000/svg"><path d="M0,10 C15,15 30,5 45,10 S75,5 90,10 S105,5 120,10" stroke="%23ffffff" fill="none" stroke-width="2"/></svg>') repeat-x;
            opacity: 0.3;
            animation: wave 1.5s linear infinite;
        }
        @keyframes wave {
            0% { transform: translateX(0); }
            100% { transform: translateX(-30px); }
        }
        .lyric-line.active {
            color: #e13e3e;
            font-size: 18px;
            font-weight: bold;
        }
        .vip-badge {
            background: linear-gradient(135deg, #ffcc00, #ff9500);
            color: #1a1a1a;
            font-weight: bold;
        }
        .official-badge {
            background: #e13e3e;
            color: white;
        }
        .premium-badge {
            background: #ffcc00;
            color: #1a1a1a;
        }
        i.fa-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
        }
    </style>
</head>
<body class="relative h-screen overflow-hidden" style="width: 375px; height: 762px;">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-dark bg-opacity-90">
        <div class="flex items-center">
            <div class="relative">
                <img src="https://ai-public.mastergo.com/ai/img_res/d3b6bfe3da749224700ebbb0988552f7.jpg" 
                     class="w-8 h-8 rounded-full object-cover">
                <div class="vip-badge absolute -bottom-1 -right-1 text-xs px-1 rounded-full">VIP</div>
            </div>
        </div>
        
        <div class="glass-effect flex-1 mx-4 px-3 py-2 rounded-full flex items-center">
            <i class="fas fa-search fa-icon text-gray-400 mr-2"></i>
            <input type="text" placeholder="搜索歌曲/歌手" class="bg-transparent border-none outline-none text-white placeholder-gray-400 w-full text-sm">
        </div>
        
        <div class="flex items-center space-x-4">
            <div class="relative">
                <i class="fas fa-qrcode fa-icon text-white"></i>
            </div>
            <div class="relative">
                <i class="fas fa-bell fa-icon text-white"></i>
                <div class="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full"></div>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="pt-16 pb-20 px-4 overflow-y-auto h-full">
        <!-- Banner轮播区 -->
        <div class="relative rounded-xl overflow-hidden mb-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/21b3eee429ee5853c91b6488646efb65.jpg" 
                 class="w-full h-40 object-cover">
            <div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">广告</div>
        </div>
        <!-- 功能入口区 -->
        <div class="grid grid-cols-6 gap-4 mb-6">
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-1">
                    <i class="fas fa-calendar-day fa-icon text-primary"></i>
                </div>
                <span class="text-white text-xs whitespace-nowrap overflow-hidden text-ellipsis">每日推荐</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-1">
                    <i class="fas fa-list fa-icon text-primary"></i>
                </div>
                <span class="text-white text-xs whitespace-nowrap overflow-hidden text-ellipsis">歌单</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-1">
                    <i class="fas fa-chart-line fa-icon text-primary"></i>
                </div>
                <span class="text-white text-xs whitespace-nowrap overflow-hidden text-ellipsis">排行榜</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-1">
                    <i class="fas fa-broadcast-tower fa-icon text-primary"></i>
                </div>
                <span class="text-white text-xs whitespace-nowrap overflow-hidden text-ellipsis">电台</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-1">
                    <i class="fas fa-video fa-icon text-primary"></i>
                </div>
                <span class="text-white text-xs whitespace-nowrap overflow-hidden text-ellipsis">直播</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-full flex items-center justify-center mb-1">
                    <i class="fas fa-satellite-dish fa-icon text-primary"></i>
                </div>
                <span class="text-white text-xs whitespace-nowrap overflow-hidden text-ellipsis">私人FM</span>
            </div>
        </div>

        <!-- 推荐歌单 -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-bold text-white">推荐歌单</h2>
                <span class="text-xs text-gray-400">更多 ></span>
            </div>
            <div class="flex overflow-x-auto space-x-3 pb-2 -mx-4 px-4">
                <div class="flex-none w-32">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/33eadee18b4c3e82af48fb3699135756.jpg" 
                             class="w-32 h-32 rounded-lg object-cover">
                        <div class="absolute top-0 left-0 bg-black bg-opacity-50 text-white text-xs px-1 rounded-tr-lg rounded-bl-lg">精品</div>
                        <div class="absolute bottom-1 left-1 flex items-center text-white text-xs">
                            <i class="fas fa-fire fa-icon text-xs mr-1"></i>
                            <span>12.5万</span>
                        </div>
                    </div>
                    <p class="text-white text-sm mt-1 whitespace-nowrap overflow-hidden text-ellipsis">深夜治愈系 | 一个人的安静时光</p>
                </div>
                <div class="flex-none w-32">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/e705d6d28a8ca585701abd0b40bd3847.jpg" 
                             class="w-32 h-32 rounded-lg object-cover">
                        <div class="absolute top-0 left-0 bg-primary text-white text-xs px-1 rounded-tr-lg rounded-bl-lg">官</div>
                        <div class="absolute bottom-1 left-1 flex items-center text-white text-xs">
                            <i class="fas fa-fire fa-icon text-xs mr-1"></i>
                            <span>8.7万</span>
                        </div>
                    </div>
                    <p class="text-white text-sm mt-1 whitespace-nowrap overflow-hidden text-ellipsis">2023年度热歌榜 | 全网流行</p>
                </div>
                <div class="flex-none w-32">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/b7db6d384b51d140608ac4c76cc19d67.jpg" 
                             class="w-32 h-32 rounded-lg object-cover">
                        <div class="absolute bottom-1 left-1 flex items-center text-white text-xs">
                            <i class="fas fa-fire fa-icon text-xs mr-1"></i>
                            <span>5.3万</span>
                        </div>
                    </div>
                    <p class="text-white text-sm mt-1 whitespace-nowrap overflow-hidden text-ellipsis">工作学习 | 专注力提升必备</p>
                </div>
            </div>
        </div>

        <!-- 新歌首发 -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-bold text-white">新歌首发</h2>
                <span class="text-xs text-gray-400">更多 ></span>
            </div>
            <div class="bg-dark bg-opacity-50 rounded-lg overflow-hidden">
                <div class="flex items-center p-3 border-b border-gray-800">
                    <div class="w-10 h-10 rounded-md overflow-hidden mr-3">
                        <img src="https://ai-public.mastergo.com/ai/img_res/bf78274a23359571692a5ffdc51420e1.jpg" 
                             class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1">
                        <p class="text-white text-sm font-medium">星辰大海</p>
                        <p class="text-gray-400 text-xs">林俊杰</p>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-lock fa-icon text-gray-400 mr-3"></i>
                        <i class="fas fa-ellipsis-h fa-icon text-gray-400"></i>
                    </div>
                </div>
                <div class="flex items-center p-3 border-b border-gray-800">
                    <div class="w-10 h-10 rounded-md overflow-hidden mr-3">
                        <img src="https://ai-public.mastergo.com/ai/img_res/f3d2ccd8a7bd662a25a7eed10d210bdb.jpg" 
                             class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1">
                        <p class="text-white text-sm font-medium">时光代理人</p>
                        <p class="text-gray-400 text-xs">周深</p>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-play fa-icon text-gray-400 mr-3"></i>
                        <i class="fas fa-ellipsis-h fa-icon text-gray-400"></i>
                    </div>
                </div>
                <div class="flex items-center p-3">
                    <div class="w-10 h-10 rounded-md overflow-hidden mr-3">
                        <img src="https://ai-public.mastergo.com/ai/img_res/b9f7560b041cfecd5c47dc24e69719be.jpg" 
                             class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1">
                        <p class="text-white text-sm font-medium">夏日限定</p>
                        <p class="text-gray-400 text-xs">蔡徐坤</p>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-yen-sign fa-icon text-gray-400 mr-3"></i>
                        <i class="fas fa-ellipsis-h fa-icon text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐MV -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-bold text-white">推荐MV</h2>
                <span class="text-xs text-gray-400">更多 ></span>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/ee75cec69031cb8467a84bf972465e98.jpg" 
                             class="w-full h-24 rounded-lg object-cover">
                        <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">04:32</div>
                    </div>
                    <p class="text-white text-sm mt-1">《光年之外》官方MV</p>
                    <p class="text-gray-400 text-xs">邓紫棋</p>
                </div>
                <div>
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/5bb5b0e03f1ca73de47a05ad959637b2.jpg" 
                             class="w-full h-24 rounded-lg object-cover">
                        <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">03:45</div>
                    </div>
                    <p class="text-white text-sm mt-1">《起风了》现场版</p>
                    <p class="text-gray-400 text-xs">吴青峰</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部播放控制条 -->
    <div class="fixed bottom-20 left-0 right-0 bg-dark bg-opacity-90 border-t border-gray-800 px-4 py-2 flex items-center">
        <div class="w-10 h-10 rounded-md overflow-hidden mr-3">
            <img src="https://ai-public.mastergo.com/ai/img_res/e2d0c2bd8d5c3f4e78828b33314b2016.jpg" 
                 class="w-full h-full object-cover now-playing">
        </div>
        <div class="flex-1">
            <p class="text-white text-sm font-medium">星辰大海</p>
            <p class="text-gray-400 text-xs">林俊杰</p>
        </div>
        <div class="flex items-center space-x-4">
            <i class="fas fa-heart fa-icon text-primary"></i>
            <i class="fas fa-play fa-icon text-white"></i>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-dark bg-opacity-90 border-t border-gray-800 flex items-center justify-around py-2">
        <div class="flex flex-col items-center">
            <i class="fas fa-home fa-icon text-primary mb-1"></i>
            <span class="text-primary text-xs">发现</span>
        </div>
        <div class="flex flex-col items-center">
            <i class="fas fa-compass fa-icon text-gray-400 mb-1"></i>
            <span class="text-gray-400 text-xs">播客</span>
        </div>
        <div class="flex flex-col items-center">
            <i class="fas fa-music fa-icon text-gray-400 mb-1"></i>
            <span class="text-gray-400 text-xs">我的</span>
        </div>
        <div class="flex flex-col items-center">
            <i class="fas fa-user-friends fa-icon text-gray-400 mb-1"></i>
            <span class="text-gray-400 text-xs">关注</span>
        </div>
        <div class="flex flex-col items-center">
            <i class="fas fa-cloud fa-icon text-gray-400 mb-1"></i>
            <span class="text-gray-400 text-xs">云村</span>
        </div>
    </nav>
</body>
</html>